<template>
  <div class="AddWebPage">
    <div class="cus-title">
      <h4>添加网页</h4>
    </div>
    <div class="cus-update">
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="网页标题:" prop="title">
          <el-col :span="24">
            <el-input
              v-model="BindForm.title"
              type="text"
              placeholder="请输入网页标题，最多30个字符"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="网页内容:" prop="html">
          <el-col :span="24">
            <WangEditor ref="rentEditor0" v-model="BindForm.html" />
          </el-col>
        </el-form-item>
        <el-form-item label="SEO描述:" prop="seoDescription">
          <el-col :span="24">
            <el-input
              v-model="BindForm.seoDescription"
              type="text"
              placeholder="可输入网页SEO描述，最多100个字符"
              maxlength="100"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="SEO关键词:" prop="seoKeywords">
          <el-col :span="24">
            <el-input
              v-model="BindForm.seoKeywords"
              type="text"
              placeholder="可输入网页SEO关键词，最多100个字符"
              maxlength="100"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark">
          <el-col :span="24">
            <el-input
              v-model="BindForm.remark"
              type="text"
              placeholder="可填入备注说明，最多30个字符"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Loading } from 'element-ui'
import { webPageAdd } from '@/api/webpage'
import WangEditor from '../../../components/WangEditor/index'
/** 天机网页 */
export default {
  name: 'AddWebPage',
  components: {
    WangEditor
  },
  data() {
    return {
      BindForm: {
        title: '',
        html: '',
        seoDescription: '',
        seoKeywords: '',
        remark: ''
      },
      rules: {
        title: [{ required: true, message: '请输入网页标题', trigger: 'change' }],
        html: [{ required: true, message: '请编辑网页内容', trigger: 'change' }]
      }
    }
  },
  methods: {
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          const data = vm.$XEUtils.clone(vm.BindForm, true)
          data['shopId'] = localStorage.getItem('shopId')
          webPageAdd(data).then(res => {
            loadingInstance.close()
            vm.$message.success('添加网页成功')
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .AddWebPage {
    padding: 30px;
    .cus-update {
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eee;

      .cus-input {
        max-width: 100%;
      }
    }
  }
</style>
